跳到主要内容

1 登录功能说明

在Element-Admin项目模板中已经将登陆的功能实现了，本小章节就来给大家介绍一下前后端分离项目中如何实现登录功能。

1.1 登录流程介绍​

1.1.1 前后端分离开发的登录流程​

如下所示：

image-20230507092923697

注意：

1、令牌：登录成功以后系统给当前登录用户分配的唯一标识

2、前端：前端系统获取到后端返回的令牌的时候就会把令牌存储起来

1.1.2 验证用户是否登录流程​

注：后端系统中所提供的一些请求地址(接口)中有一些是必须要求用户登录才可以访问，比如生成订单

image-20230507093802197

Vue3-Element-Admin的登录功能实现：当登录成功以后，会将登录成功以后返回的数据存储到pinia的useApp模块中，同时会把数据存储到localStorage中。

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

image-20230507104413603

1.2 模板源码分析​

1.2.1 登录请求过程​

登录页面​

登录页面：src/views/login/index.vue